<script lang="ts" setup>
	import { MessageOutlined, HeartOutlined, EyeOutlined, ShareAltOutlined, PictureOutlined, LinkOutlined, SmileOutlined, MoreOutlined } from "@ant-design/icons-vue"
	import { ref } from "vue"
	import { NewsApi } from '@/api/news';
	import utils from '@/utils'
	import { useRoute } from 'vue-router'
	const route = useRoute()
	let id = route.query.id
	let detail = ref<any>({})
	const getDetail = ()=>{
		NewsApi.getDetail({
			id: id,
		}).then((res : any) => {
			if (res.code == 1) {
				detail.value = res.data
			}
		})
	}
	getDetail()
	
</script>

<template>
	<div class="content" v-if="detail.id">
		<div class="header">
			<div class="title">{{detail.title}}</div>
			<div class="header-bottom">
				<div class="time">
					 未来科技 {{utils.dateFormat(new Date(detail.createTime*1000),'yyyy-MM-dd hh:mm')}} 上海
				</div>
				<div class="like-box">
					<!-- <div class="icon-box">
						<heart-outlined class="icon" /> 255
					</div>
					<div class="icon-box">
						<message-outlined class="icon" />2
					</div> -->
					<div class="icon-box">
						<eye-outlined class="icon" />{{detail.read}}
					</div>
				</div>
			</div>
		</div>
		<div class="article">
			<div v-html="detail.content"></div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
	.content {
		width: 1280px;
		margin: 0 auto;
		.header {
			padding-top: 170px;
		
			.title {
				font-size: 24px;
				line-height: 120%;
				margin-bottom: 18px;
			}
		
			.header-bottom {
				.time {
					color: #999999;
				}
		
				.like-box {
					margin-left: auto;
					display: flex;
					align-items: center;
					color: #999999;
					width: 200px;
					justify-content: space-between;
					font-size: 16px;
		
					.icon-box {
						display: flex;
						align-items: end;
		
						.icon {
							margin-right: 4px;
							font-size: 20px;
						}
					}
				}
			}
		}
		
		.article {
			margin-top: 65px;
			padding-bottom:50px;
		}
	}

</style>